﻿<template>
  <div class="Adventure" ref="el">
    <header_n :header_name="header_name" :go_back_flag="true"></header_n>
    <!--<div class="go_back_btn" v-on:click="go_back_btn">-->
    <!--<img src="../../static/img/new_style_go_back.png" alt="">-->
    <!--</div>-->
    <Adventure_core @music_show="music_show" @img_max_show="img_max_show"
                    @qes_data_change="qes_data_change"
                    @show_q="show_q" :q_data='qes_data' :up_load_id="up_load_id" @scroll_ful_data_f ="scroll_ful_data_f"></Adventure_core>
    <div class="music_box" v-show="music_show_d" v-on:click.self="music_show">
      <div class="music_box_main">
        <div class="music_line">
          <div class="music_line_play" v-bind:style="{width:line_p_w+'%'}">

          </div>
          <div class="music_w">
            <div v-show="img_s">{{music_w}}</div>
            <div v-show="!img_s&&!finish_recoed_flag">{{music_w}}</div>
            <div v-show="!img_s" style="display:flex;position:relative;width:100%;">
              <span class="" style="font-size:0.9rem;" v-on:click="record_play" v-show="!img_s&&finish_recoed_flag&&!stop_play"> 播放录音 </span>
              <!--stop_play s-->
              <img src="../../../static/img/stop.png" v-show="stop_play" class="btn_music_img" v-on:click="pause_play" style="width:4vw;height:1rem;line-height:1rem;margin-top:0.3rem;margin-left:1vw;">
              <!--stop_play e-->
              <img src="../../../static/img/start.png" style="width:4vw;height:1rem;line-height:1rem;margin-top:0.3rem;margin-left:1vw;" v-show="!img_s&&finish_recoed_flag&&!stop_play">
            </div>
          </div>
        </div>
        <div class="btn_music">
          <div class="delete_voice_btn" v-show="!img_s&&finish_recoed_flag" v-on:click.self="delect_d">
            X
          </div>
          <img src="../../../static/img/start.png" v-show="img_s" class="btn_music_img" v-on:click="music_c">
          <img src="../../../static/img/stop.png" v-show="!img_s&&!finish_recoed_flag" class="btn_music_img" v-on:click="done_record">
        </div>
        <div class="btn_w">
          <span v-show="!img_s&&finish_recoed_flag">删除</span>
          <span v-show="!img_s&&!finish_recoed_flag">完成</span>
          <span v-show="img_s">开始</span>
        </div>
        <div class="upd" v-on:click="up_load_voice">
          提交
        </div>
      </div>
    </div>
    <!-- show_max s -->
    <div class="show_max" v-show="show_max" v-on:click="hide_show_max">
      <img v-bind:src="bind_show_img" ref="show_max_img">
    </div>
    <!-- show_max e -->
    <!-- q s -->
    <div class="ck_q" v-on:click="close_ck_q" v-show="close_ck_q_d" ref="qs">
      <div class="bg_c" v-for="qs_list in qs_list" v-on:click="change_qs(qs_list.problemContent)">
        {{qs_list.problemContent}}
      </div>
    </div>
    <!-- q e -->

    <!-- scroll_ful s -->
    <scroll_ful v-if="scroll_ful_data" @scroll_ful_data_f_hide="scroll_ful_data_f_hide"></scroll_ful>
    <!-- scroll_ful e -->
  </div>

</template>

<script>
  import header_n from "../../common/header_other/Header_name_img.vue"
  import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
  //limit_Scroll
  import common from "../../common/common.js"
  import { Toast, Indicator, MessageBox } from 'mint-ui';
  import Adventure_core from "./input_limit_card_core.vue"
  import qs from 'qs';
  import style from "../../../static/css/mint-ui/style.css"
  import axios from 'axios'
  import Vue from "vue";
  import limit_scroll from "../../../static/js/limit_scroll.js"
  import scroll_ful from "../scroll_full.vue"
  axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8';
  Vue.prototype.$http = axios;
  export default {
    name: 'Detail_Exchange',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        img_s: true,
        music_show_d: false,
        show_max: false,
        bind_show_img: "",
        qs_list: "",
        close_ck_q_d: false,//问题参考
        qes_data: "",//提交和显示的问题
        music_w: "录音",//时间轴显示的时间
        music_w_show: false,
        finish_recoed_flag: false,
        record_voice: null,//录音保存
        line_p_w: "100",//时常线
        setInterval_id: "",//时间轴动画id
        stop_play: false,//显示暂停
        up_load_id: null,//上传 voice 返回后的 id
        scroll_ful_data:false,
        header_name:"写冒险卡"
      }
    },
    props: ['show'],
    beforeCreate: function () {

    },
    methods: {
      //参考问题 value改变
      qes_data_change:function(e){
        console.log("data_cahnge")
        console.log(e);
        this.qes_data  = e;
      },
      //go_back_btn
      go_back_btn:function(){
        common.go_back_none_btn();
      },
      //scroll_ful_data
      scroll_ful_data_f_hide: function () {
        this.scroll_ful_data = false;
      },
      scroll_ful_data_f: function () {
        this.scroll_ful_data = true;
      },
      //上传 voice
      up_load_voice: function () {
        wx.uploadVoice({
          localId: this.record_voice, // 需要上传的音频的本地ID，由stopRecord接口获得
          isShowProgressTips: 1, // 默认为1，显示进度提示
          success: function (res) {
            let serverId = res.serverId; // 返回音频的服务器端ID
            this.up_load_id = res.serverId

          }
        });
      },
      //暂停 播放
      pause_play: function () {
        if (this.record_voice) return;
        wx.pauseVoice({
          localId: this.record_voice // 需要暂停的音频的本地ID，由stopRecord接口获得
        });
        this.stop_play = false;
      },
      //删除录音
      delect_d: function () {
        this.record_voice = null//清空录音
        // this.music_w = 0 //时间轴显示的时间
        this.music_w = "录音";
        this.finish_recoed_flag = false;//flag
        this.img_s = true;//变回开始
        this.stop_play = false; // 录音暂停图标隐藏
      },
      //完成录音
      done_record: function () {
        this.finish_recoed_flag = true;
        //停止录音
        wx.stopRecord({
          success: (res) => {
            //语音
            this.record_voice = res.localId;
            //停止时间轴动画
            clearInterval(this.setInterval_id)
          }
        });
      },
      //显示 问题参考
      show_q: function () {
        this.close_ck_q_d = true;
      },
      //隐藏问题 参考
      close_ck_q: function () {
        this.close_ck_q_d = false
      },
      img_max_show: function (img) {
        this.show_max = true//显示show max
        this.bind_show_img = img
      },
      chang_state_b_recoed() {

      },
      //上传语言
      up_load_recoed() {
        if (this.record_voice == null) return;
        wx.uploadVoice({
          localId: this.record_voice, // 需要上传的音频的本地ID，由stopRecord接口获得
          isShowProgressTips: 1,// 默认为1，显示进度提示
          success: function (res) {
            let serverId = res.serverId; // 返回音频的服务器端ID
            this.up_load_id = res.serverId;
          }
        });
      },
      //播放录音
      record_play: function () {
        if (this.record_voice == null) {
          // alert("路由id为空")
          return;
        }
        //显示可以暂停
        this.stop_play = true;
        //监听语音播放完毕接口
        wx.onVoicePlayEnd({
          success: function (res) {
            this.stop_play = false;
            let localId = res.localId; // 返回音频的本地ID
          }
        });
        wx.playVoice({
          localId: this.record_voice // 需要播放的音频的本地ID，由stopRecord接口获得
        });
      },
      music_c: function () {
        this.img_s = !this.img_s;
        if (this.img_s == false) {
          //开始录音
          this.music_w = "录音中";
          wx.startRecord();
        } else {
          // 录音时间超过一分钟没有停止的时候会执行 complete 回调
          wx.onVoiceRecordEnd({
            complete: (res) => {
              //alert("录音完成");
              //语音
              this.record_voice = res.localId;
              //出现删除语音标志 和 动画状态
              this.done_record();
              //停止时间轴动画
              clearInterval(this.setInterval_id)
            }
          });
        }
      },
      music_show: function () {
        this.music_show_d = !this.music_show_d
      },
      hide_show_max: function () {
        this.show_max = false;
      },
      change_qs: function (e) {
        this.qes_data = e
      }
    },
    mounted: function () {
      limit_scroll(this.$refs.el, this.$refs.el);
      limit_scroll(this.$refs.qs, this.$refs.el);
      //获取微信 conifg
      //获取 参考问题
      Indicator.open();
      this.$http.get('/yizhiweimen/api/user/personalHomepage/getReproblems',
        qs.stringify(
          {

          })
      )
        .catch((thrown) => {
          Indicator.close();
          Toast({
            message: '网络出错',
            position: 'bottom',
            duration: 2000
          });
        }).then((e) => {
        //记录id
        Indicator.close();
        this.qs_list = e.data
      })

      //获取分享配置
      return;
      let url = location.href;
      url = url.split("#")[0];
      this.$http.post('/api/wxUtil/getSign',
        qs.stringify(
          {
            "url": url
          })
      )
        .then((e) => {
          // 上面两个请求都完成后，才执行这个回调方法
          Indicator.close();
          let data = e.data
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: data.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
            timestamp: data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.nonceStr, // 必填，生成签名的随机串
            signature: data.signature,// 必填，签名，见附录1
            jsApiList: ["startRecord", "stopRecord", "onVoiceRecordEnd", "playVoice", "pauseVoice", "stopVoice", "onVoicePlayEnd", "uploadVoice"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          });
        })
        .catch((e) => {
          Indicator.close();
          console.log(e)
          Toast({
            message: "网络出22错",
            position: 'bottom',
            duration: 2000
          });
        })

    },
    components: {
      Adventure_core,
      scroll_ful,
      header_n
    }
  }
</script>
<style lang="scss">
@import "./sass/base_input.scss";
@import "./sass/input_limit_card.scss";
</style>

